<template>
  <el-form-item :rules="item.rule" :label="item.label" :prop="item.prop">
    <div class="mix" @mouseover="itemMouseover(item)" @mouseout="itemMouseout">
      <el-time-picker
        v-model="formData[item.prop]"
        @change="item.change && item.change(formData[item.prop])"
        :disabled="item.disabled"
        :editable="item.editable === undefined ? true : item.editable"
        :clearable="item.clearable === undefined ? true : item.clearable"
        :align="item.align"
        :format="item.format"
        :value-format="item.valueFormat"
        :default-value="item.defaultValue"
        :is-range="item.isRange"
        :placeholder="
          item.placeholder === undefined ? '请选择' : item.placeholder
        "
        :range-separator="
          item.rangeSeparator === undefined ? '至' : item.rangeSeparator
        "
        :start-placeholder="
          item.startPlaceholder === undefined
            ? '开始时间'
            : item.startPlaceholder
        "
        :end-placeholder="
          item.endPlaceholder === undefined ? '结束时间' : item.endPlaceholder
        "
        :default-time="item.defaultTime"
        :picker-options="item.pickerOptions"
        class="timeStyle"
      />
      <span class="el-input__suffix-inner" v-show="suffixShow">
        <i class="el-input__icon el-icon-time icon_end_fix"></i>
      </span>
    </div>
  </el-form-item>
</template>

<script>
import moment from "moment";
import _ from "lodash";

export default {
  name: "timeCom",
  props: {
    item: {
      type: Object,
      default: () => {
        return {};
      }
    },
    formData: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      suffixShow: true
    };
  },
  created() {
    // let now = moment().format("YYYY-MM-DD HH:mm:ss");
    // if (_.isArray(this.formData[this.item.prop])) {
    //   if (!this.formData[this.item.prop][0]) {
    //     this.formData[this.item.prop][0] = now;
    //   }
    //   if (!this.formData[this.item.prop][1]) {
    //     this.formData[this.item.prop][1] = now;
    //   }
    // } else {
    //   if (!this.formData[this.item.prop]) {
    //     this.formData[this.item.prop] = now;
    //   }
    // }
  },
  methods: {
    itemMouseover(item) {
      if (this.formData[item.prop]) {
        this.suffixShow = false;
      }
    },
    itemMouseout() {
      this.suffixShow = true;
    }
  }
};
</script>

<style scoped lang="scss">
.icon_end_fix {
  color: #c0c4cc;
  position: absolute;
  right: 0;
  top: 0;
  display: inline !important;
}

.mix {
  width: 100%;
  position: relative;
}

// ::v-deep .el-input__inner {
//   padding-left: 15px !important;
// }

::v-deep.el-date-editor .el-range__close-icon {
  position: absolute;
  right: 0;
  top: -1px;
}

::v-deep.el-range-editor {
  padding: 0 !important;
}
::v-deep .el-range-separator {
  width: 20px;
  line-height: 32px !important;
}
::v-deep .el-range-input {
  width: calc((100% - 20px - 30px) / 2);
}
</style>
